<template>
	<view>
		<van-nav-bar title="注册账号" right-text="返回登录" left-arrow class="loginNav" @click-left="onClickLeft" @click-right="onClickRight" />
		<div class="field">
		    <ul>
		        <li>
		            <i class="icon icon1"></i>
		            <input type="tel" placeholder="请输入手机号" name="" id="">
		        </li>
		        <li>
		            <i class="icon icon2"></i>
		            <input type="password" placeholder="请输入登录密码" name="" id="">
		        </li>
		        <li>
		            <i class="icon icon2"></i>
		            <input type="password" placeholder="确认登录密码" name="" id="">
		        </li>
				<li class='bindH'>
				    <i class="icon icon3"></i>
					<span @tap="show=true">{{value}}<van-icon name="arrow-down" /></span>
				    <input type="tel" placeholder="绑定手机号码" name="" id="">
				</li>
		        <li class="yzm">
		            <i class="icon icon4"></i>
		            <input type="txt" placeholder="短信验证码" name="" id="">
		            <span>获取验证码</span>
		        </li>
		        <li>
		            <i class="icon icon5"></i>
		            <input type="txt" placeholder="推荐码（必填）" name="" id="">
		        </li>
		    </ul>
		</div>
		
		<div class="btnBox">
		    <button class="primary">立即注册</button>
		</div>
		
		<van-popup :show="show" position="bottom" @close="show=false">
			<van-picker show-toolbar :columns="columns" @cancel="show=false"  @confirm="onConfirm" />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				columns:['+86', '宁波', '温州', '嘉兴', '湖州'],
				value : '+86',
			};
		},
		methods:{
			onClickLeft() {
				uni.navigateBack()
			},
			onClickRight(){
				uni.navigateBack()
			},
			onConfirm(event){
				const { picker, value, index } = event.detail;
				this.value = value
				this.show = false
				console.log(this.value)
			}
		}
	}
</script>

<style lang="less">
.field{
        margin-top: 70upx;
        padding: 0 60upx;

        li{border-bottom: 1upx solid #9A9A9A;position: relative;
            margin-bottom: 40upx;
            .icon{
                width: 36upx;
                height: 36upx;
                display: inline-block;
                vertical-align: middle;
				float: left;
				margin-top: 10upx;
				
                &.icon1{background: url("~@/static/icon/p.png") no-repeat;background-size: 100% 100%;}
                &.icon2{background: url("~@/static/icon/m.png") no-repeat;background-size: 100% 100%;}
                &.icon3{background: url("~@/static/icon/s.png") no-repeat;background-size: 100% 100%;}
                &.icon4{background: url("~@/static/icon/dx.png") no-repeat;background-size: 100% 100%;}
				&.icon5{background: url("~@/static/icon/yq.png") no-repeat;background-size: 100% 100%;}
            }
            input{
                width: 603-110upx;
                padding-left: 20upx;
                height: 60upx;
                font-size: 26upx;
            }

            &.yzm{
                span{position: absolute;right: 0;top:15upx;font-size: 26upx;color: #1E6CFA;}
            }
			&.bindH{
				span{float:left;margin-top:10upx; padding-left: 10upx; border-right: 1upx solid #9A9A9A;
					.van-icon{vertical-align: middle;margin: 0 15upx}
				}
				input{width: 300upx;}
			}
        }
		
    }

    .btnBox{margin-top: 100upx;}
</style>
